﻿@namespace AntBlazor
@inherits AntDrawerBase

<div class="@ClassMapper.Class" @ref="@Ref" style="@drawerStyle @Style" @attributes="Attributes" Id="@Id">
    @if (mask)
    {
        <div class="ant-drawer-mask" @onclick="_=>maskClick()" style="@maskStyle"></div>
    }
    <div class="ant-drawer-content-wrapper @wrapClassName " style="@wrapperStyle">
        <div class="ant-drawer-content">
            <div class="ant-drawer-wrapper-body" style="@(isLeftOrRight?"height:100%":"")">
                @if (_title.Value != null || closable)
                {

                    <div class="@TitleClassMapper.Class">
                        @if (_title.Value != null)
                        {
                            <div class="ant-drawer-title">
                                @if (titleTemplate != null)
                                {
                                    @titleTemplate
                                }
                                @if (string.IsNullOrEmpty(titleString))
                                {
                                    @((MarkupString)titleString)
                                }
                            </div>
                        }
                        @if (closable)
                        {
                            <button onclick="_=>closeClick()" aria-label="Close" class="ant-drawer-close">
                                <AntIcon type="close"></AntIcon>
                            </button>
                        }
                    </div>
                }
                <div class="ant-drawer-body" style="@bodyStyle">
                    @*<ng-template cdkPortalOutlet></ng-template>*@
                    @if (ContentTemplate != null)
                    {
                        @ContentString
                    }
                    @if (string.IsNullOrEmpty(ContentString))
                    {
                        @((MarkupString)ContentString)
                    }
                    @ChildContent
                </div>
            </div>
        </div>
    </div>
</div>
